<template>
  <el-table :data="tableData">
    <el-table-column prop="lid" label="编号" />
    <el-table-column prop="cardNum" label="还款卡号" />
    <el-table-column prop="lcount" label="贷款金额" />
    <el-table-column prop="borrowDate" label="还款日期" />
    <el-table-column prop="loanTime" label="贷款期限" />
    <el-table-column>
      <template v-slot="scope">
        <el-button type="primary" @click="state.reBackTheLoan(scope.row)">
          还款
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" title="还款">
    <span>
      <el-form :model="reBackLoan">
        <el-form-item label="输入支付密码">
          <el-input
            v-model="reBackLoan.password"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="state.submitTheMyLoanMsg">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogBankCardVisible" title="还款">
    <span>
      <el-form :model="reBackLoan">
        <el-form-item label="输入支付密码">
          <el-input
            v-model="reBackLoan.password"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入新的银行卡号">
          <el-input
            v-model="reBackLoan.money"
            :blur="state.calThePayRice"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogBankCardVisible = false">取消</el-button>
        <el-button type="primary" @click="state.submitRepeatTheMyLoanMsg">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { GetMyLoanListMsg, ReBackLoanMoney } from '@/api/loan'

const tableData = ref([])
const dialogVisible = ref(false)
const dialogBankCardVisible = ref(false)
const reBackLoan = ref({
  id: '',
  password: '',
  cardNum: '',
})

const state = {
  getTableDate: async () => {
    const { data } = await GetMyLoanListMsg()
    console.log(data)
    tableData.value = data
    console.log(tableData.value)
  },
  reBackTheLoan: async data => {
    reBackLoan.value.id = data.id
    dialogVisible.value = true
    console.log(reBackLoan.value)
  },
  submitTheMyLoanMsg: async () => {
    //先去后端请求是否余额充足
    const { code, message } = await ReBackLoanMoney(reBackLoan.value)
    console.log(code)
    console.log(message)
    if (code === 200) {
      //余额充足，还款
      ElMessage.success(message)
      //还款成功 关闭dialog刷新列表
      dialogVisible.value = false
      await state.getTableDate()
    } else if (code === 400) {
      //支付密码错误,让用户重新输入
      ElMessage.error(message)
      reBackLoan.value.password = ''
      dialogVisible.value = false
      console.log('支付密码错误')
    } else if (code === 500) {
      ElMessage.error(message)
      //不充足，则输入新的卡号，并接收，然后再去发请求
      reBackLoan.value.password = ''
      reBackLoan.value.cardNum = ''
      dialogVisible.value = false
      //用户输入新的银行卡号来进行还款操作
      dialogBankCardVisible.value = true
      console.log('余额不足')
    }
  },
  submitRepeatTheMyLoanMsg: async () => {
    const { code, message } = await ReBackLoanMoney(reBackLoan.value)
    console.log(code)
    console.log(message)
    if (code === 200) {
      //余额充足，还款
      ElMessage.success(message)
      //还款成功 关闭dialog刷新列表
      dialogVisible.value = false
      await state.getTableDate()
    }
    if (code === 400) {
      //支付密码错误,让用户重新输入
      ElMessage.error(message)
      reBackLoan.value.password = ''
      console.log('支付密码错误')
    }
    if (code === 500) {
      ElMessage.error(message)
      //不充足，则输入新的卡号，并接收，然后再去发请求
      reBackLoan.value.password = ''
      reBackLoan.value.cardNum = ''
      dialogVisible.value = false
      //用户输入新的银行卡号来进行还款操作
      dialogBankCardVisible.value = true
      console.log('余额不足')
    }
  },
}
onMounted(() => {
  state.getTableDate()
})
</script>

<style scoped></style>
